<template>
  <div class="home">
    <Ruler :isRuler="isRuler" @closeRuler="chosePanel"/>
    <Follow :isFollow="isFollow"/>
    <Bind :isBind="isBind" :queryData="queryData" v-if="!isBind"/>
    <div class="flower-panel"></div>
    <div class="wave-footer"></div>
    <div class="container">
      <header class="animated fadeInDown"></header>
      <article class ref="zhuozi"></article>
      <footer>
        <p class="start" ref="start" @click.passive.stop.once="startFunc"></p>
        <p class="ruler-btn" @click.passive.stop="showRuler">
          <span>活动规则</span>
          <i class="wenhao"></i>
        </p>
      </footer>
    </div>
  </div>
</template>

<script>

import Bind from '@/components/Bind'
import Follow from '@/components/Follow'
import Ruler from '@/components/Ruler'
import common from '@/mixins/common'
import ruler from '@/mixins/ruler'
import { checkUser } from '@/axios/api'
/* eslint-disable */
// @ is an alias to /src
export default {
  name: 'home',
  data() {
    return {
      isBind: true,
      isFollow: true,
      food: null,
      queryData: null
    }
  },
  mixins: [common, ruler],
  components: {
    Ruler, Bind, Follow
  },
  created: async function () {
    Promise.all([checkUser()]).then(rs => {
      let [user] = [...rs];
      console.log(user.res.bindPhoneStatus);
      if (false === user.res.subscribe) {
        this.isFollow = false;
        return;
      }
      if (false === user.res.bindPhoneStatus) {
        this.isBind = user.res.bindPhoneStatus
        return;
      }
      this.food = user.res.food;
      console.log(user.res.food);
      localStorage.setItem('food', JSON.stringify(user.res.food));
    })
  },
  mounted() {
    this.animateFunc();
  },
  methods: {
    startFunc() {
      console.log('2');
      if (null === this.food) {
        this.$router.push({ name: 'choose', query: {} })
      } else {
        this.$router.push({ name: 'make', query: {} })
      }
    },

    //动画
    animateFunc() {
      // this.Velocity(this.$refs.start, {
      //   scale: '.8,.8,1'
      // }, {
      //     duration: 2000,         // 动画执行时间
      //     easing: "easeInOut",
      //     loop: true,           // 循环
      //     delay: '1000',          // 延迟
      //     mobileHA: true         // 移动端硬件加速（默认开启）
      //   })
      this.Velocity(this.$refs.zhuozi, {
        rotateZ: '+=360deg'
      },
        {
          /* Velocity 动画配置项的默认值 */
          duration: 20000,         // 动画执行时间
          easing: "linear",       // 缓动效果
          queue: "",             // 队列
          begin: undefined,      // 动画开始时的回调函数
          progress: undefined,   // 动画执行中的回调函数（该函数会随着动画执行被不断触发）
          complete: undefined,   // 动画结束时的回调函数
          display: undefined,    // 动画结束时设置元素的 css display 属性
          visibility: undefined, // 动画结束时设置元素的 css visibility 属性
          loop: true,           // 循环
          delay: false,          // 延迟
          mobileHA: true         // 移动端硬件加速（默认开启）
        })
    }

  }
}
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  font-size: 24px;
  background: url("../assets/images/wave.png");
  background-size: 100% auto;
  .flower-panel {
    position: fixed;
    z-index: 333;
    width: 100%;
    height: 100%;
    font-size: 24px;
    background: url("../assets/images/bg.png") no-repeat;
    background-size: 100% auto;
  }
  .wave-footer {
    position: fixed;
    bottom: 0;
    z-index: 333;
    width: 640px;
    height: 65px;
    background: url("../assets/images/flow.png") no-repeat;
    background-size: 640px 65px;
  }
  .container {
    position: fixed;
    top: 0;
    width: 640px;
    z-index: 666;
    height: 353px;
    background: url("../assets/images/paozu.png") no-repeat;
    background-size: 100% auto;
    header {
      margin: 50px auto 10px;
      width: 520px;
      height: 232px;
      background: url("../assets/images/title.png") no-repeat;
      background-size: 100% auto;
    }
    article {
      margin: 0 auto;
      width: 450px;
      height: 450px;
      background: url("../assets/images/zhuozi.png") no-repeat;
      background-size: 100% auto;
    }
    footer {
      position: relative;
      z-index: 99999;
      .start {
        transform: scale(1, 1, 1);
        margin: 10px auto;
        width: 514px;
        height: 104px;
        background: url("../assets/images/join.png") no-repeat;
        background-size: 100% auto;
      }
    }
    .ruler-btn {
      margin: 0 auto;
      text-align: center;
      color: #faf3e7;
      font-size: 24px;
      height: 0.22rem;
      line-height: 0.22rem;
      display: flex;
      justify-content: center;
      justify-items: center;
      span {
        align-self: center;
      }
      .wenhao {
        align-self: center;
        margin: auto 10px;
        width: 22px;
        height: 22px;
        background: url("../assets/images/wenhao.png") no-repeat;
        background-size: 100% auto;
      }
    }
  }
}
</style>

